<template>
  <input type="checkbox" v-model="isChecked">

  共{{ count }}个待办，已完成{{ finishedCount }}个<br/>
  <button class="delete_finish" @click="clearFinishedTodo">清除已完成任务</button>
</template>

<script>
export default {
  name: "Footer",
  props: {
    count: {
      type: Number,
      required: true
    },
    finishedCount: {
      type: Number,
      required: true
    },
    selectAllTodos: {
      type: Function,
      required: true
    },
    clearFinishedTodo: {
      type: Function,
      required: true
    }
  },
  methods: {},
  computed: {
    isChecked: {
      get() {
        return this.count === this.finishedCount && this.count!==0
      },
      set(value) {
       this. selectAllTodos(value)
      }
    }
  }
}
</script>

<style scoped>
.delete_finish {
  background-color: orange;
  color: white;
  border: none;
}

</style>